{{define "post/modify.html"}}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Post - Modify</title>

    <!-- Bootstrap Core CSS -->
    <link href="/static/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/static/css/blog-post.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script src="/static/libs/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>

    <!-- font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- simplemde -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css" />
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

    <!-- code syntax highlighting -->
    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css" />

    <!-- x-editable (bootstrap version) -->
    <link href="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

    <!-- InlineAttachment -->
    <script src="/static/libs/InlineAttachment/inline-attachment.js"></script>
    <script src="/static/libs/InlineAttachment/codemirror-4.inline-attachment.js"></script>

    <!-- bootstrap-switch -->
    <link href="/static/libs/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"/>
    <script src="/static/libs/bootstrap-switch/js/bootstrap-switch.min.js"></script>

    <script>
        $(document).ready(function () {
            var simplemde = new SimpleMDE({
                element: document.getElementById("demo"),
                autofocus: false,
                forceSync: true,
                hideIcons: ["guide"],
                indentWithTabs: false,
                tabSize: 4,
                spellChecker: false,
                renderingConfig: {
                    singleLineBreaks: true,
                    codeSyntaxHighlighting: true,
                },
                showIcons: ["code"],
                status: false,
            });

            // inlineAttachment
            inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
                uploadUrl: "/admin/upload",
                jsonFieldName:"url",
                onFileUploadResponse: function(xhr) {
                    var result = JSON.parse(xhr.responseText),
                        filename = result[this.settings.jsonFieldName];

                    if (result && filename) {
                        var newValue;
                        if (typeof this.settings.urlText === 'function') {
                            newValue = this.settings.urlText.call(this, filename, result);
                        } else {
                            newValue = this.settings.urlText.replace(this.filenameTag, filename);
                        }
                        var text = this.editor.getValue().replace(this.lastValue, newValue);
                        this.editor.setValue(text);
                        this.settings.onFileUploaded.call(this, filename);
                    }
                    return false;
                }
            });

            $('#postSave').click(function(event){
                event.preventDefault();
                $("#demo").text(simplemde.value());
                var tags = new Array();
                $(".tagButton .tagId").each(function(index,element){
                    tags.push($(element).text());
                });
                $("#tags").val(tags.join(","));
                $("#postForm").submit();
            });

            $('#addTag').editable({
                mode: "inline",
                type: "text",
                pk: 1,
                url: "/admin/new_tag",
                placeholder: "add a tag",
                success: function (tag) {
                    createButton(tag.data.ID, tag.data.Name);
                },
                error: function (e) {
                    console.log(e);
                },
                display: function (value, response) {
                    return false;   //disable this method
                }
            });

            $('#switchbtn').bootstrapSwitch({
                onText:'公开',
                offText:'不公开',
            });

        });

        function deleteTag(element){
            $(element).parent().remove();
        }

        function createButton(tagId, tagName) {
            var button = `<button class="btn btn-default btn-sm tagButton">
                    <a href="/tag/` + tagId + `">` + tagName + `</a>
                    <a class="removeArticleTag" href="#" onclick="deleteTag(this);">
                        <span class="glyphicon glyphicon glyphicon-trash"></span>
                    </a>
                    <span class="tagId" hidden="hidden">` + tagId + `</span>
                    </button>&nbsp;`;
            $("#addTag").before(button);
        }

    </script>

</head>

<body>

{{template "navigation.html"}}

<div class="container">

    <div class="col-sm-offset-1 col-sm-10">

        <!-- add a new tag -->
        <span id="tagBug">
            {{range $tagkey,$tagvalue := .post.Tags}}
            <button class="btn btn-default btn-sm tagButton">
                    <a href="/tag/{{$tagvalue.ID}}">{{$tagvalue.Name}}</a>
                    <a class="removeArticleTag" href="#" onclick="deleteTag(this);">
                        <span class="glyphicon glyphicon glyphicon-trash"></span>
                    </a>
                    <span class="tagId" hidden="hidden">{{$tagvalue.ID}}</span>
                    </button>&nbsp;
            {{end}}
            <span style="border: none" id="addTag" class="glyphicon glyphicon-edit"></span>
            <a id="postSave" class="glyphicon glyphicon-saved"
               style="float: right; padding-left: 15px;"></a>
        </span><br/><br/>

        <!-- create or update a article -->
        <form action="/admin/post/{{.post.ID}}/edit" method="post" id="postForm" class="form-group">
            <input id="tags" name="tags" type="hidden">
            <input name="title" type="text" class="form-control" placeholder="Title" value="{{.post.Title}}"/><br/>
            <textarea id="demo" name="body">{{.post.Body}}</textarea><br/>
            <div class="bootstrap-switch-small">
                <input id="switchbtn" name="isPublished" type="checkbox" {{if .post.IsPublished}}checked{{end}} />
            </div>
        </form>
    </div>

</div>

{{template "footer.html"}}

</body>

</html>
{{end}}